import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/pages/user/broadcast/widget/broadcast_item_view.dart';
import 'package:flutter_smart_heating/pages/user/broadcast/widget/preview_view.dart';
import 'package:flutter_smart_heating/ui/src/pull_to_refresh.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class BroadcastPage extends StatelessWidget {
  final NoticeLogic logic = Get.put(NoticeLogic());
  final NoticeState state = Get.find<NoticeLogic>().state;

  BroadcastPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: UiTheme(context).match(light: Colors.white),
        title: Text('消息中心'.tr),
      ),
      body: UiState(
        controller: state.uiStateController,
        preview: previewView(context),
        onLoad: logic.fetchCate,
        child: Column(
          children: [
            GetBuilder<NoticeLogic>(
              id: 'page',
              builder: (controller) {
                return tabbarView(context);
              },
            ),
            Expanded(
              child: GetBuilder<NoticeLogic>(
                id: 'list',
                builder: (controller) {
                  return state.loading
                      ? const UiLoading()
                      : state.list.isEmpty
                          ? const UiResult(
                              ikon: 'notice',
                            )
                          : UiPushToRefresh(
                              controller: state.refreshController,
                              onRefresh: () {
                                state.pagination.currentPage = 1;
                                logic.fetchList();
                              },
                              onLoad: () {
                                state.pagination.currentPage++;
                                logic.fetchList();
                              },
                              child: ListView.builder(
                                itemCount: state.list.length,
                                itemBuilder: (context, index) {
                                  var item = state.list[index];
                                  return BroadcastItemView(
                                    item: item,
                                    onTap: (p0) {
                                      logic.setRead(p0);
                                    },
                                  );
                                },
                              ),
                            );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget tabbarView(context) {
    return Container(
      height: 50,
      color: UiTheme(context).match(
        light: Colors.white,
        dark: Colors.white.withOpacity(0),
      ),
      child: TabBar(
        dividerColor: Colors.grey.withOpacity(0.2),
        dividerHeight: 0.2,
        labelColor: UiTheme.primary,
        isScrollable: state.category.length > 5,
        indicator: const UiRoundUnderlineTabIndicator(
          lineWidth: 30,
          borderSide: BorderSide(
            color: UiTheme.primary,
            width: 3,
          ),
        ),
        indicatorColor: UiTheme.primary,
        unselectedLabelColor: UiTheme.of(context)
            .match(light: Colors.black, dark: Colors.white)
            .withOpacity(0.65),
        unselectedLabelStyle: const TextStyle(
          fontWeight: FontWeight.normal,
        ),
        labelStyle: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: UiTheme.fontSize.tabbarFontSize,
        ),
        controller: state.tabController,
        tabs: state.category
            .map((e) => Tab(
                  text: e['name'],
                ))
            .toList(),
        onTap: (value) {
          logic.onTabsClick(value);
        },
      ),
    );
  }
}
